/*
* 缩略图插件
* imgs: [], 图片路径地址数组
* active: 0, 默认查看第一张图片
* */
;(function($){
    $.fn.extend({
        thumbnail: function(options){
            var _self = $(this);
            var defaults = {
                imgs: [],
                active: 0
            };
            options = $.extend({},defaults, options);

            if (options.imgs.length) {
                var str = '';
                for(var i = 0; i < options.imgs.length; i++) {
                    if (options.imgs[i]) {
                        var isActive = (i === options.active) ? ' active' : '';
                        str += '<li><img class="small-pic' + isActive + '" src="' + options.imgs[i] + '"></li>';
                    }
                }
                var thumbnailHtml = '<div class="thumbnail"><ul class="big-pic-ul"><li style="height: 172px;"><img class="big-pic" src="' + options.imgs[options.active] + '"></li></ul>' +
                    '<ul class="small-pic-ul">' + str + '</ul></div>';
                _self.html(thumbnailHtml);

                var smallPic = _self.find('.small-pic');
                var bigPic = _self.find('.big-pic');
                /* 缩略图点击显示在大图上 */
                smallPic.click(function () {
                    smallPic.removeClass('active');
                    var src = $(this).addClass('active').attr('src');
                    bigPic.attr('src', src);
                });

                _self.find('.big-pic-ul').viewer({
                    zIndex: 10020
                });
            }

            return _self;
        }
    });

})(jQuery);